<template>
	<view>
		<navbar :data="navbar" :currentIndex='currentTopNavIndex' @change="handleChangeNav" />

		<swiper  :style="{'height':viewHeight+'px'}"  :current="currentTopNavIndex"
			@change="handleChangeTab">

			<swiper-item v-for="i in navbar.length">
			<scroll-view scroll-y="true" :style="{'height':viewHeight+'px'}" @scrolltolower="hangdleLoadMore">
			<block v-for="item in home" :key="index">
			<template v-if="item.type==='banner'">
				<!-- 轮播图 -->
					<Banner :data='item.data' dots activecolor="#fff" mode="scaleToFill" @tapSwiper='handleTapBanner' />
			</template>
					
					<template v-if="item.type==='menu'">
						
						<!-- 九宫格 -->
					<v-grid-nav :data='item.data' @click='handleClickSubNav'></v-grid-nav>
					<dividerline></dividerline>
					</template>
					<template v-if="item.type==='threeAdv'">
						<!-- 三图广告 -->
					<threeAdv :data='item.data' @click="handleClickThreeAdv"></threeAdv>
					<dividerline></dividerline>
					</template>
					
					<template v-if="item.type==='recommend'">
						<!-- 推荐商品列表 -->
					<good-list :data="item.data"></good-list>
					</template>
					
				</block>
			</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				currentTopNavId: null,//选中tab菜单 id
				currentTopNavIndex: 0,//选中tab菜单 下标 index
				viewHeight: 0
			}
		},
		computed: {
			...mapState('index', ['navbar','home'])
		},
		components: {
			navbar: () => import('@/components/navbar/navbar.vue'),
			Banner: () => import('@/components/banner/banner.vue'),
			vgridnav: () => import('@/components/v-grid-nav/v-grid-nav.vue'),
			threeAdv: () => import('@/components/threeAdv/threeAdv.vue'),
			goodList: () => import('@/components/goodlist/goodlist.vue'),
			dividerline: () => import('@/components/dividerLine/dividerLine.vue'),

		},
		onLoad() {
			this.navBarAction().then(res=>{
			this.currentTopNavId=this.navbar[0].id
			this.homeAction(this.currentTopNavId)
			}) //1.导航栏网络请求
			
			
		},
		onReady() {
			// 获取可视区高度 - tab菜单高度 =商品展示区高度
			uni.getSystemInfo({
				success:(res)=>{
					this.viewHeight=res.windowHeight - uni.upx2px(58)
				}
			})
		},
		// #ifdef APP-PLUS || H5
		onNavigationBarButtonTap(e) { //App H5 页面生命周期监听原生标题栏按钮点击事件左右
			const {
				index
			} = e

			if (index === 1) {
				uni.switchTab({
					url: '/pages/my/my'
				})
			}
		},

		onNavigationBarSearchInputClicked(e) { //监听原生标题栏搜索输入框点击事件
			uni.navigateTo({
				url: '/pages/search/search'
			})
		},
		// #endif
		methods: {
			...mapActions('index', [ 'homeAction','navBarAction']),
			//点击轮播图
			handleTapBanner(e) {
				console.log('点击了轮播图',e);
			},
			//点击九宫格菜单
			handleClickSubNav(e) {
				console.log('点击了九宫格菜单', e);
			},
			//点击三图广告
			handleClickThreeAdv(e){
				console.log('点击了三图广告',e);
			},
			handleChangeNav(e) {
				this.currentTopNavIndex = e.index
				this.currentTopNavId = e.value.id
				this.homeAction(this.currentTopNavId)
			},
			handleChangeTab(e) {
				this.currentTopNavIndex = e.detail.current
			},
			hangdleLoadMore(){
				console.log('触底了');
			}
		},
		}
</script>

<style scoped lang="scss">

</style>
